<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021-01-25
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>

    <base href="<%=request.getContextPath()%>">
    <link rel="stylesheet" href="/webjars/layui/2.5.6/css/layui.css"/>
</head>
<body>
<form class="layui-form" lay-filter="search">
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label" style="width: 100px">角色名称</label>
            <div class="layui-input-inline" style="width: 120px;">
                <input  type="text" id="roleName" name="roleName"  class="layui-input" lay-filter="caigouId">
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" onclick="add()" >添加</button>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn layui-btn-sm" onclick="grant()" >授权</button>
        </div>
    </div>
</form>
<script type="text/html" id="toolbar">

</script>
<table lay-filter="role" id="role"></table>
<script type="text/html" id="action">
    {{#  if(d.roleId== 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    {{#  } }}
    {{#  if(d.roleId!= 1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
    {{#  } }}
</script>
<script src="/webjars/layui/2.5.6/layui.js"></script>
<script>
    layui.use(["table","jquery","laypage","form"],function () {
        let table=layui.table;
        let $=layui.$;
        // let laypage = layui.laypage;
        let sea=layui.form.val("search");
        let form=layui.form;
        laypage = layui.laypage
        table.render({
            id:"role",
            elem:"#role",
            where:sea,
            url:"/role/search",
            height:"400px",
            toolbar: "#toolbar",
            page:true,
            limit:5,
            limits:[5,10,15,20],
            cols:[[
                {type:"radio"},
                {title:"ID",field:"roleId"},
                {title:"角色编码",field:"roleCode"},
                {title: "角色名称",field: "roleName"},
                {title: "角色描述",field: "roleDesc"},
                {title: "操作",toolbar:"#action"}
            ]],
            done:function (res,curr,count) {
                //登录标志的转换
                // $("[data-field='loginFlag']").children().each(function(){
                //     if($(this).text()=='Y'){
                //         $(this).text("允许登录")
                //     }else if($(this).text()=='N'){
                //         $(this).text("禁止登录")
                //     }
                // });

            }

        })


        //采购订单号文本框监听事件
        $("#roleName").on("input",function (e) {
            let sea=form.val("search");
            layui.table.reload('role',{
                where: sea
            });
        });


        table.on("tool(role)",function ({data,event}) {

            switch (event) {
                case "update":
                    update(data);
                    break;
                case "del":
                    del(data);
                    break;
            }
        });
    });


    //修改
    function update(data) {
        layui.use(["layer","jquery","table"],function () {
            console.log("点击修改")
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;

            let id=data.roleId;
            $.post('/role/selectbyID', {'roleId':id}, function(str){
                console.log(str)
                layui.form.val("update",str.data);
            });
            layer.open({
                type: 1,
                title:"修改角色",
                content: $('#update'), //注意，如果str是object，那么需要字符拼接。
                closeBtn:1,
                area: ['500px', '400px'],
                btn:["确认","取消"],
                yes(){
                    let role = layui.form.val("update");
                    console.log(role.roleName)
                    console.log(role.roleDesc)
                    console.log(role);
                    if (role.roleName==null||role.roleName==''||role.roleDesc==null||role.roleDesc==''){
                        alert("不能为空，修改失败")
                        $("#update").click();
                        return false;
                    }else {
                        $.post("/role/update", role)
                            .done(({msg}) => {
                                table.reload("role");
                                layer.close(layer.index);
                                layer.msg(msg);
                            });
                    }


                    // $("#add").click();
                }

            })

        })
    }
    //授权操作
    function grant() {
        layui.use(["layer","table","jquery","tree"],function () {
            let layer=layui.layer;
            let $=layui.$;
            let tree=layui.tree;
            let table=layui.table;
            let arr=table.checkStatus("role").data;
            if (arr.length==0){
                layer.alert("请选择一项待授权！");
                return;
            }

            let roleId=arr[0].roleId;
            $.post("/role/searchTreeData/${arr[0].id}")
                .done(({data})=>{
                    tree.render({
                        id:"tree",
                        elem: "#tree",
                        showCheckbox:true,
                        data
                    });
                    layer.open({
                        type: 1,
                        title:"角色授权",
                        content: $('#tree'), //注意，如果str是object，那么需要字符拼接。
                        closeBtn:1,
                        area: ['500px', '400px'],
                        btn:["确认","取消"],
                        yes(){
                            //获取选中的权限
                            let nodes=tree.getChecked("tree").flat(3);
                            console.log(nodes)
                            let ids=[];
                            for (let node of nodes){
                                if(!node.checked){
                                    continue;
                                }
                                ids.push(node.id);
                                for (let item of node.children){
                                    console.log(item)
                                    if(item.checked){
                                        ids.push(item.id);
                                    }
                                }
                            }
                            console.log(roleId)
                            console.log("ids:"+ids)
                            $.ajax({
                                url: '/role/grant',
                                data:{
                                    roleId:roleId,
                                    ids:ids
                                },
                                method:'post',
                                traditional:true,
                                success:({msg})=>{
                                    layer.close(layer.index);
                                    layer.msg(msg);
                                }

                            })
                            // $.post('/role/grant',{'roleId':roleId,'ids':ids})
                            //     .done(({msg})=>{
                            //         layer.close(layer.index);
                            //         layer.msg(msg);
                            //     });
                        }
                    })
                })
        })
    }

    //添加角色
    function add() {
        layui.use(["layer","jquery","table"],function () {
            console.log("点击添加");
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;
            let jquery=layui.jquery;

            $.post("/role/getroleCode",function (str) {
                        console.log(str)
                        if (str==null){

                        }else {
                            layui.form.val("add",{roleCode:str});
                        }

                    })

            layer.open({
                type: 1,
                title:"添加角色",
                content: $('#add'), //注意，如果str是object，那么需要字符拼接。
                closeBtn:1,
                area: ['500px', '400px'],
                btn:["确认","取消"],
                yes(){
                    let tbUscRole = layui.form.val("add");
                    console.log(tbUscRole)
                    if (tbUscRole.roleCode==null||tbUscRole.roleCode==''||tbUscRole.roleName==null||tbUscRole.roleName==''||tbUscRole.roleDesc==null||tbUscRole.roleDesc==''){
                        alert("不能为空，添加失败")
                        $("#add").click();
                        return false;
                    }else {

                        $.post("/role/add",tbUscRole)
                            .done(({msg}) => {
                                table.reload("role");
                                layer.close(layer.index);
                                layer.msg(msg);
                            });
                    }


                    // $("#add").click();
                }

            })
        })
    }


    //删除
    function del(data) {
        layui.use(["layer","jquery","table"],function(){
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;
            let jquery=layui.jquery;



            let roleId=data.roleId;
            layer.confirm('确认删除吗？',{
                btn:['确定','取消']
            },function(){

                $.post("/role/selectCoutUser",{'roleId':roleId},function (str) {
                    console.log(str)
                    if (str>0){
                        console.log("进入str》0")
                        table.reload("role");
                        layer.msg("该角色在使用中不能删除！");
                    }else if(str<=0){
                        $.post("/role/del",{'roleId':roleId})
                            .done(({msg})=>{
                                table.reload("role");
                                layer.msg(msg);
                            });
                    };
                });

            });

        });
    };

</script>
<div id="tree" style="display: none"></div>
<div style="display: none" id="update">
    <form class="layui-form" lay-filter="update"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item" style="display: none">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input type="text" name="roleId" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-block">
                <input type="text" name="roleDesc" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
<div style="display: none" id="add">
    <form class="layui-form" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">角色编码</label>
            <div class="layui-input-block">
                <input type="text" name="roleCode" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="roleName" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-block">
                <input type="text" name="roleDesc"  lay-verify="required"   class="layui-input">
            </div>
        </div>
    </form>
</div>
</html>
